<template>
  <div>
    <button @click="showToast" class="btn">打开 toast</button>
    <!-- to 属性就是目标位置 -->
    <teleport to="#teleport-target">
      <card></card>
      <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
      </div>
    </teleport>
    <ul class="list">
      <li class="item" v-for="item in list" :key="item" :ref="setItemRef">{{item}}</li>
    </ul>
    <async-comp></async-comp>
    <my-collapse></my-collapse>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineAsyncComponent } from 'vue'
import { ref } from 'vue'
import Card from '@/components/card'

const asyncComponent = defineAsyncComponent({
  loader: () => import('@/components/asyncComponent'),
  delay: 200,
  timeout: 3000,
})
export default {
  components: {
    'card': Card,
    'async-comp':asyncComponent
  },
  data() {
    return {
      itemRefs: [],
      list:[0,1,2,3,4,5]
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    // console.log(this.itemRefs)
  },
  methods: {
    setItemRef(el) {
      this.itemRefs.push(el)
      // console.log(this.itemRefs);
    }
  },
  setup() {
    // toast 的封装
    const visible = ref(false)
    let timer
    const showToast = () => {
      visible.value = true
      clearTimeout(timer)
      timer = setTimeout(() => {
        visible.value = false
      }, 2000)
    }
    return {
      visible,
      showToast
    }
  }
}
</script>
